<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="openDialog">新增机器码</el-button>
    </div>
    <MyTable :tableData="orderList" :columns="titleData">
      <template #fordata="{ row }">
        <!-- 自定义单元格内容 -->
        <!-- {{ row }} -->
        <el-button size="small" class="custom-button" @click="delOpen(row)"
          >删除</el-button
        >
      </template>
    </MyTable>

    <div style="margin-top: 50px">
      <Pagination
        class="pagination"
        :current-page="temparam.pageNum"
        :page-size="temparam.pageSize"
        :total="totalItems"
        @update:current-page="temparam.pageNum = $event"
        @update:page-size="pageSize = $event"
        @change="loadData(temparam)"
      />
    </div>
  </div>
  <MyDialog @update:visible="updateDialog" :initVisible="dialogVisible" :width="500">
    <div class="closeBtn">
      <el-button @click="handleClose" circle><i class="iconfont">&#xe60e;</i></el-button>
    </div>
    <!-- 这里可以放置对话框内容 -->
    <div style="padding: 30px">
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item label="机器码">
          <el-input v-model="formInline.machineCode" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="别名">
          <el-input
            v-model="formInline.name"
            type="text"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button class="custom-button" @click="addcode">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { machineList, machineAdd, machineDel } from "@/common/userApi";
import Pagination from "@/components/Pagination.vue";
import MyTable from "@/components/MyTable.vue";
import MyDialog from "@/components/MyDialog.vue";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const openDialog = () => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = true;
};
const updateDialog = (value: boolean) => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = value;
};
const handleClose = () => {
  dialogVisible.value = false;
  // isOpen.value = false;
};
const titleData = [
  { label: "别名", prop: "name" },
  { label: "机器码", prop: "machineCode" },
  { label: "操作", type: "template" },
];
let currentPage = ref(1);
let pageSize = ref(5);
let totalItems = ref(0); // 假设总数为100
const orderList = ref<[] | any>([]);

// 加载数据的逻辑
let temparam = reactive({
  pageNum: currentPage.value,
  pageSize: pageSize.value,
});
function loadData(data?: any) {
  window.scrollTo(0, 0);
  machineList(data).then((res) => {
    // console.log(res);
    const tempTotal = res.total + "";
    // console.log(tempTotal);
    totalItems.value = parseInt(tempTotal);
    orderList.value = res.rows;
  });
}
loadData(temparam);
const formInline = reactive({
  machineCode: "",
  name: "",
});
// 新增机器码
const addcode = () => {
  console.log(formInline);
  machineAdd(formInline.machineCode, formInline.name).then((result) => {
    console.log(result);
    if (result.code == 200) {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      handleClose();
      loadData(temparam);
    }
  });
};
// 删除机器码delOpen
const delOpen = (row: any) => {
  console.log(row);
  machineDel(row.id).then((result) => {
    if (result.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      handleClose();
      currentPage.value = 1;
      loadData(temparam);
    }
  });
};
</script>

<style scoped>
.closeBtn {
  padding: 30px 30px 0 0;
  text-align: right;
}
</style>
